/*
|--------------------------------------------------------------------------
| 组件 公用头部
|--------------------------------------------------------------------------
|
| author：辜小芸
| data： vuex.userInfo
| DOTO:  备注
|
*/

<template>
      <div class="homeHeader" v-bind:style="styleObject">
            <div class="logo-l" @click="jump">
                <!--<img :src="bgColorBlue ? '../../assets/img/home/logo-white.png' : '../../assets/img/home/logo.png' " />-->
                <img src='../../assets/img/home/logo.png'/>
                <span>希古尚博</span>
            </div>
            <div class="logo-r">
                <p>CRM系统</p>
                <br>
                <p>Customer Relationship Management</p>
            </div>
            <div class="logo-message" v-if="userInfoIsShow">
                <!--部门选择下拉框-->
                <!--<el-cascader :options="userInfo[2]" :props="props" :change-on-select='true' :show-all-levels="false" size="mini" :placeholder="currentDepartment">-->
                <!--</el-cascader>-->
                <span>hi,{{userInfo[0].YHMC}}</span>
                <span v-if="screenWidth > 1025">{{time}}</span>
                <span class="changePwd" @click="changePwdDialog">
                    <i class="iconfont icon-xiugaimima"></i>修改密码
                </span>
                <span class="signOut" @click="logOut">
                    <i class="iconfont icon-tuichu"></i>退出
                </span>
            </div>
          <el-dialog
                  title="修改密码"
                  :visible.sync="centerDialogVisible"
                  width="30%">
              <!--<div class="change-pwd-content">-->
                  <div class="change-pwd-bar flex">
                      <div class="change-pwd-tip">原密码：</div>
                      <div class="flex1"><el-input v-model="oldPassword" placeholder="请输入原密码"></el-input></div>
                  </div>
                  <div class="change-pwd-bar flex">
                      <div  class="change-pwd-tip">新密码：</div>
                      <div class="flex1" ><el-input v-model="password" placeholder="请输入新密码" ></el-input></div>
                  </div>
                  <div class="change-pwd-bar flex">
                      <div  class="change-pwd-tip">确认密码：</div>
                      <div class="flex1"><el-input v-model="remPassword" placeholder="请重复新密码" ></el-input></div>
                  </div>
              <!--</div>-->

              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePwdHandle">确 定</el-button>
              </span>
          </el-dialog>
      </div>
</template>

<script type="text/ecmascript-6">
    import {mapState,mapMutations,mapActions} from 'vuex';
    import { updatePassword } from '../../service/api'
    import {Cascader} from 'element-ui'
    export default {
        name: 'my-header',
        data() {
            return {
                userInfoIsShow: true, // 头部右边是否显示
                oldPassword: '', // 头部右边是否显示
                password: '', // 头部右边是否显示
                remPassword: '', // 头部右边是否显示
                centerDialogVisible: false, // 修改密码弹框是否显示
                props:{
                    value:"BMBM",
                    label:"BMMC",
                    children:"_child"
                },
                currentDepartment: '', // 当前选中的部门
                bgColorBlue: true,
                styleObject: {
                    color: '#fff',
                    backgroundColor: '#3193f3'
                },
                screenWidth: document.body.clientWidth   // 屏幕可见宽
            }
        },
        computed: {
            screenWidth () {
                return window.screen.width;
            }
        },
        mounted () {
            if (location.hash == '#/' || location.hash == '#/login') {
                this.userInfoIsShow = false
            }
            if (location.hash == '#/' || location.hash == '#/home') {
                this.bgColorBlue = false
            }
            let department = localStorage.getItem("department");
            if(department){
                this.currentDepartment = department;
            }else {
                this.currentDepartment = this.checkedDepartment.BMMC;
            }
        },
        computed: {
            /*catch store.data*/
            ...mapState({
                userInfo: state => state.login.userInfo,
//                options: state => state.login.options,
                checkedDepartment: state => state.login.checkedDepartment
            }),
            time: function (){
                let date = new Date();
                return this.$utils.getNowFormatDate(date)
            }
        },
        methods: {
            /*catch store.mutation*/
            ...mapMutations(['setName', 'setAuthority', 'saveDepartment']),
            /*catch store.action*/
            ...mapActions(['SAVE_USERINFO']),
            changePwdDialog () {
                this.centerDialogVisible = true;
            },
            async changePwdHandle () {
                if (!this.oldPassword || !this.password || !this.remPassword) {
                    this.$utils.openMessgeTip('请填写完整信息', '提示');
                    return
                } else if (this.password != this.remPassword) {
                    this.$utils.openMessgeTip('新密码与确认密码不一致', '提示');
                    return
                }
                let submitData = {
                    password: this.password,
                    rem_password: this.remPassword,
                    old_password: this.oldPassword,
                    mobile: this.userInfo[0].SMS
                }
                const { code, data, message } = await updatePassword(submitData);
                if (code == 200) {
                    this.centerDialogVisible = false;
                    this.$message({
                        message: '恭喜你，密码修改成功！',
                        type: 'success'
                    });
                } else {
                    this.$utils.openMessgeTip(message, '提示')
                }
            },
            handleChange(value) {
                console.log(value);
            },
            logOut() {
                this.$router.push({ path: "/" });
                let userInfo= [{}, [], []];
                this.SAVE_USERINFO(userInfo);
                localStorage.clear();
            },
            jump () {
                if (location.hash == '#/' || location.hash == '#/login') {
                    this.$router.push({ path: "/" });
                } else {
                    this.$router.push({ path: "/home" });
                }
            }
        },
        watch: {
            '$route': function(to, from) {
                if (this.$route.path === '/' || this.$route.path === '/home') {
                    this.bgColorBlue = false
                } else {
                    this.bgColorBlue = true
                }
            }
        }
    }
</script>
